import React, { useEffect, useState } from 'react'
import { Table, Button, Tag, notification } from 'antd'
import { getArticle, updateAuditStateArticle } from "../../../api/api"

export default function AuditList(props) {
  const [dataSource, setDataSource] = useState([]);
  const { id } = JSON.parse(localStorage.getItem("token"))
  useEffect(() => {
    const httpRequest = async () => {
      //获取文章
      const res = await getArticle({
        id,
        auditState: 0,
        publishState: 1
      })
      setDataSource(res.data.data)
    }
    httpRequest()
  }, [id])
  const auditList = ["未审核", "审核中", "已通过", "未通过"]
  const colorList = ["", "orange", "green", "red"]
  const columns = [
    {
      title: '新闻标题',
      dataIndex: 'title',
      render: (title, item) => {
        return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
      }
    },
    {
      title: '作者',
      dataIndex: 'nickname',
    },
    {
      title: '新闻分类',
      dataIndex: 'classifyName'
    },
    {
      title: 'VIP文章',
      dataIndex: 'vip',
      render: (vip) => {
        return vip ? '是' : '否'
      }
    },
    {
      title: '审核状态',
      dataIndex: 'auditState',
      render: (auditState) => {
        return <Tag color={colorList[auditState]}>{auditList[auditState]}</Tag>
      }
    },
    {
      title: '操作',
      dataIndex: 'publishState',
      render: (publishState, item) => {
        return (
          <div>
            {
              item.auditState === 1 && <Button type="primary" danger onClick={() => {
                setDataSource(dataSource.filter(data => data.id !== item.id))
                //修改文章审核状态
                updateAuditStateArticle({
                  id: item.id,
                  "auditState": 0,
                })
                notification.info({
                  message: '通知',
                  description: `您可以到草稿箱中查看您的新闻`,
                  placement: "bottomRight",
                });
              }}>撤销</Button>
            }
            {
              item.auditState === 2 && <Button onClick={() => {
                //修改文章审核状态
                updateAuditStateArticle({
                  id: item.id,
                  "publishState": 2,
                  "publishTime": Date.now()
                })
                setDataSource(dataSource.filter(data => data.id !== item.id))
                notification.info({
                  message: '通知',
                  description: `您可以到【发布管理/已发布】中查看您的新闻`,
                  placement: "bottomRight",
                });
              }}>发布</Button>
            }
            {
              item.auditState === 3 && <Button type="primary" onClick={() => {
                props.history.push(`/news-manage/update/${item.id}`)
              }}>修改</Button>
            }
          </div>
        )
      }
    },
  ]
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} pagination={{
        pageSize: 5,
        pageSizeOptions:[]
      }} />
    </div>
  )
}
